<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="dao.LanguagesDAO"%>
<%@page import="dao.DictionariesDAO"%>
<%@page import="blo.LanguagesBLO"%>
<link href="fluid.css" media="screen" type="text/css" rel="stylesheet">
<link href="css/uportal3.css" media="screen" type="text/css" rel="stylesheet">
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<script type="text/javascript" src='/${requestScope.contextPath}/scripts/common.js' ></script>
<script type="text/javascript" src='/${requestScope.contextPath}/scripts/jquery-1.4.2.js' ></script>

<link rel="stylesheet" href="/${requestScope.contextPath}/scripts/main.css" type="text/css" />
<link rel="stylesheet" href="/${requestScope.contextPath}/scripts/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="/${requestScope.contextPath}/scripts/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/${requestScope.contextPath}/scripts/jquery.autocomplete.js"></script>

<%--Autocompleting --%>
<script>
$(document).ready(function(){
	    var data = "Core Cast Cube Cone Corn Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
	$("#SearchTextBox").autocomplete(data);
});
</script>

<%--Function to retain the selections of the dropboxes --%>
<script>
$(function(){
	$('#FromL').val('${result.slFrom}');
});

$(function(){
	$('#ToL').val('${result.slTo}');
});
</script>

<%--Function to load a JSP page, bring dynamic content to the page --%>
<!--<script>
	$(function(){
			$('#nanana').load('/${requestScope.contextPath}/AvailableL.jsp');
		});
</script>

--><%--Hook a loading function to an event, load JSP page when it triggered --%>
<script type="text/javascript">
      $(function(){
			        $('#FromLang').change(function(){
			            var FromID = $(this).val();
			            $('#ToLang').load('/${requestScope.contextPath}/AvailableL.jsp', { LangId: FromID } 
			                    		 );
			          })
			          .change();
      			  }
      );
</script>


<script type="text/javascript">
	function Translate(){
			var varFrom = $('#FromLang').val();
			var varTo = $('#ToLang').val();
			$('#Translation').load('/${requestScope.contextPath}/AvailableL.jsp',{From: varFrom, To: varTo});
		}
	$(function(){
			$('#TranslateB').Click(function(){ Translate();})
		})
</script>


<form name="<portlet:namespace/>LookUpWord" action="<portlet:actionURL/>" method="POST">
<input name="eventId" type="hidden" />
<input name="screenId" type="hidden" value="searchword"/> 
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0" bgcolor="#66CCFF" height="22">
<tr>
<td><p align="left">Hello: ${sessionScope.username}!</td>
<td>
<p align="right">

<c:if test="${sessionScope.userrole == -1}">
<input name="btnContribute" value="Contribute" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>", "LookUpWord", "contribute");' type="button" />
<input name="btnLogin" value="Login" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "login");' type="button"/>
</c:if>

<c:if test="${sessionScope.userrole == 0}">
<input name="btnContribute" value="Contribute" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>", "LookUpWord", "contribute");' type="button" />
<input name="btnLogout" value="Logout" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "logout");' type="button"/>
</c:if>

<c:if test="${sessionScope.userrole == 1 or sessionScope.userrole == 2}">
<input name="btnContribute" value="Contribute" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>", "LookUpWord", "contribute");' type="button" />
<input name="btnLogout" value="Logout" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "logout");' type="button"/>
<input name="btnManagerHome" value="Manager Home" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "managerhome");' type="button"/>
</c:if>


</td>
</tr>
</table>

<table width=100%>
<tbody>
<tr>
<td>
<input name="mode" onclick="changeMode('S01LookupWord','DICT_MODE')" type="radio" value="1">Language Mode
<input name="mode" onclick="changeMode('S01LookupWord','DICT_MODE')" type="radio" checked value="dict">Dictionary Mode
<table>
<tbody>
<tr>
<td>
<div id="modeshowed" align="left">
<table>
						<tbody><tr>
							<td>
								<table>
									<tbody><tr>
										<td align="right">From:</td>
									</tr>
									<tr>
										<td align="right">To:</td>
									</tr>
								</tbody></table>
							</td>
							<td>
								<table>
									<tbody><tr>
										<td align="left">
    <select style="width: 150px;" name="slFrom" id="FromLang">
        <%
            LanguagesBLO bloLanguages = new LanguagesBLO();
            out.print(bloLanguages.getListHTML()); 
        
        %>
    </select></td>
									</tr>
									<tr>
										<td align="left">
<div id="ToLang"></div></td>
									</tr>
								</tbody></table>
							</td>
							<td>
								&nbsp;</td>
						</tr>
						
					</tbody>
                    
                    </table>
</div>
</td>
</tr>

</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td align="right">Word:</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td align="right">
<input id="SearchTextBox" name="txtWord" autocomplete="off" value="${result.txtWord }" style="width: 145px;"type="text">
<input name="btnTranslate" value="Translate" style="width: 85;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "translate");' type="button">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td></td>

<td><table><tbody><tr><td align="right"><div id="wordList"><table><tbody><tr>
<td valign="top">
<select name="slWordList" style="width: 150;height:225" size="10" onchange="onSelChange('OnlineStardict_StardictPortlet_OnlineStardict_StardictPortlet','HomePage')">
<option value="91363">tech</option>
<option value="91364">techie</option>
<option value="91365">techily</option>
<option value="91366">techiness</option>
<option value="91367">technetium</option>
<option value="91368">technic</option>
<option value="91369">technical</option>
<option value="91370">Technical change through R&amp;D</option>
<option value="91371">technical college</option>
<option value="91372">Technical efficiency</option>
</select>
</td>
<td valign="top" width="100%"><div align=left id="MeaningDiv">

<pre><font color="red">${result.txtmeaning }
</font>

</pre>

</div>
<div align="right">
<pre><a href="#">PLAYSOUND</a></pre>
</div>
</td></tr></tbody></table>
</div></td></tr></tbody></table></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="36">&nbsp;
</td>
</tr>
</tbody></table>

</form><br>
<button id="TranslateB">Translate</button>
<div id="Translation"></div>
